<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="add flex_center" v-if="id!=''" @tap="delShow=true">
				<uni-icons type="trash" size="22" color="#fff" style="font-weight: 600;"></uni-icons>
			</view>
			<view class="title">添加银行卡</view>
			<view class="form">
				<view class="form_item">
					<view class="form_title">
						收款人姓名
					</view>
					<view class="input_box flex">
						<input type="text" v-model="form.bankname" style="flex:1" maxlength="30" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						收款人地址
					</view>
					<view class="input_box flex">
						<input type="text" v-model="form.bankuseraddr" style="flex:1" maxlength="30" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						银行名称
					</view>
					<view class="input_box flex">
						<input type="text" v-model="form.bank" style="flex:1" maxlength="30" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						银行卡号
					</view>
					<view class="input_box flex">
						<input type="number" v-model="form.address" style="flex:1" maxlength="30" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						银行地址
					</view>
					<view class="input_box flex">
						<input type="text" v-model="form.bankaddr" style="flex:1" maxlength="30" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						银行国际程序码
					</view>
					<view class="input_box flex">
						<input type="text" v-model="form.bankcode" style="flex:1" maxlength="30" />
					</view>
				</view>
				<view class="fixed">
					<view class="done btn flex_between" @tap="confirmBtn" v-if="id === ''">
						<text>完成</text>
						<uni-icons custom-prefix="iconfont" type="icon-duigou" color="#fff" size="24"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<popup-view :show="delShow" @popupClose="popupClose" @popupConfirm="popupConfirm"
			content="确认删除这个银行卡吗?"></popup-view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import popupView from "@/components/popupView.vue"
	import {
		walletAddApi,
		walletListApi,
		getWithdrawalApi
	} from '@/api/api.js'
	export default {
		components: {
			headerView,
			popupView
		},
		data() {
			return {
				delShow: false,
				form: {
					bankname: '',
					address: '',
					bank: '',
					bankaddr: '',
					bankuseraddr: '',
					bankcode: ''
				},
				id: "",
				channel_id: '',
			};
		},
		onLoad(query) {
			this.getWithdrawal()
			if (!query.id) {
				return
			}
			const bankCardId = query.id
			this.id = bankCardId
			const token = uni.getStorageSync('token');
			const type = '1'
			walletListApi({
				type,
				token
			}).then(res => {
				const bankCardList = res.data.data;
				const bankCardInfo = bankCardList.find(card => card.id == bankCardId);
				if (bankCardInfo) {
					// 将银行卡信息渲染到输入框中，你需要根据实际情况将数据绑定到页面上
					this.form = bankCardInfo
				}
			})
		},
		methods: {
			getWithdrawal() {
				const type = '1'
				getWithdrawalApi({
					type
				}).then(res => {
					console.log(res.data.data[0].id)
					this.channel_id = res.data.data[0].id
				})
			},
			popupClose() {
				this.delShow = false
			},
			popupConfirm() {
				console.log("确认删除")
				this.popupClose()
			},

			async confirmBtn() {
				if (this.form.bank == "") {
					uni.$u.toast(this.$t("持卡人不能为空"))
					return
				}
				if (this.form.address == "") {
					uni.$u.toast(this.$t("银行卡号不能为空"))
					return
				}
				try {
					const token = uni.getStorageSync('token');
					const channel_id = this.channel_id;
					const {
						bankname,
						address,
						bank,
						bankuseraddr,
						bankaddr,
						bankcode
					} = this.form;

					const response = await walletAddApi({
						token,
						channel_id,
						bankname,
						address,
						bank,
						bankuseraddr,
						bankaddr,
						bankcode
					});

					// 处理添加银行卡接口的响应
					console.log(response);

					// 在这里处理接口返回的结果，可以根据需要进行相应的操作

					uni.showToast({
						title: response.data.msg,
						icon: 'success',
						success: () => {
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/user/wallet/bank"
								})
							}, 2000)
						}
					});
					// 如果需要跳转页面或其他操作，请在这里添加相应的代码
				} catch (error) {
					console.error("添加银行卡失败", error);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		height: auto;

		.content {
			padding-bottom: 40rpx;
			// position: relative;
			padding-right: 0;

			.add {
				position: absolute;
				right: 40rpx;
				top: 40rpx;
				width: 72rpx;
				height: 72rpx;
				background-color: #f05150;
				border-radius: 20rpx;
			}

			.title {
				padding-top: 60rpx;
				font-size: 30px;
				font-weight: 500;
				font-family: PM;
				line-height: 92rpx;
			}

			.form {

				.form_item {
					padding: 40rpx 40rpx 0 0;

					.form_title {
						font-family: PM;
						font-size: 12px;
						opacity: .8;
					}

					.input_box {
						width: 100%;
						margin-top: 20rpx;
						background-color: hsla(0, 0%, 92.9%, .46);
						border-radius: 20rpx;
						font-size: 30rpx;
						padding: 0 40rpx;
						height: 88rpx;
						line-height: 88rpx;
						border: 4rpx solid #3d3d3d;
						font-weight: 600;
						font-family: PM;
					}
				}

				.fixed {
					.btn {
						height: 100rpx;
						line-height: 100rpx;
						color: #fff;
						font-size: 32rpx;
						padding: 0 40rpx;
						border-radius: 20rpx;
						background-image: url("../../../static/img/btn_bg.png");
						background-size: cover;
						background-repeat: no-repeat;
						overflow: hidden;
						// position: absolute;
						// right: 0;
						// left: 0;
						// bottom: 10vh;
					}

					.done {
						background-color: #0065ff;
						margin-left: 40rpx;
						margin-top: 80rpx;
						border-radius: 20rpx 0 0 20rpx;
					}
				}
			}
		}
	}

	.mask {
		width: 100%;
		height: auto;
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx;

		.back {
			width: 72rpx;
			height: 72rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
			border-radius: 20rpx;
		}

		.title {
			font-size: 50rpx;
			margin: 40rpx 0;
		}

		.list {
			.item {
				margin: 20rpx 0;
				align-items: flex-start;

				.logo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					margin-right: 30rpx;
					flex-shrink: 0;
				}

				.i_list {
					flex: 1;
					overflow: hidden;
					box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					padding: 20rpx 30rpx;
					border-radius: 20rpx;

					.i_item {
						padding: 10rpx 0;
						font-weight: 600;

						.font_title {
							font-size: 32rpx;
							opacity: 0.6;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
</style>